说明
backface-visibility 属性可用于隐藏内容的背面。默认情况下，背面可见，这意味着即使在翻转后，变换的内容仍然可见。但当 backface-visibility 设置为 hidden 时，旋转后内容将隐藏，因为旋转后正面将不再可见。
取值
visible：默认值，旋转的时候背景可见。
hidden：旋转的时候背景不可见。
实例代码
CSS
.demo_box{
position:relative;
background:#4d6ea6;
margin:50px;
float:left;
-webkit-animation:demo_box 4s infinite linear;
-moz-animation:demo_box 4s infinite linear;
}
.show{
-webkit-backface-visibility:visible;
-moz-backface-visibility:visible;
}
.hidden{
-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden;
}
.mod_run_code{
-webkit-perspective-origin:right top;
-moz-perspective-origin:right top;
-moz-transform-style:preserve-3D;
-webkit-transform-style:preserve-3d;
-webkit-transform: perspective(500px);
-moz-transform: perspective(500px);
}
@-webkit-keyframes demo_box{
0%{-webkit-transform:perspective(500px) rotateX(0deg);}
100%{-webkit-transform:perspective(500px) rotateX(360deg);}
}
@-moz-keyframes demo_box{
0%{-moz-transform:perspective(500px) rotateX(0deg);}
100%{-moz-transform:perspective(500px) rotateX(360deg);}
}
HTML
运行一下 »
<div class="demo_box show">背景可见</div> <div class="demo_box hidden">背景隐藏</div>
兼容性
| IE | Firefox | Opera | Safari | Chrome |
|---|---|---|---|---|
| IE 10+ | Firefox 3.5+ | Opera 11.50+ | Safari 10+ | Chrome 2.0+ |